<template>
    <div>
        <el-form ref="form" id="xx" :model="form" :rules="myrules" label-width="80px">
            <el-form-item prop="name" label="商品名称">
                <el-input v-model="form.name"></el-input>
            </el-form-item>
            <el-form-item prop="price" label="商品价格">
                <el-input v-model="form.price"></el-input>
            </el-form-item>
            <el-form-item prop="describes" label="商品描述">
                <el-input v-model="form.describes"></el-input>
            </el-form-item>
            <el-form-item prop="stock" label="商品库存">
                <el-input v-model="form.stock"></el-input>
            </el-form-item>
            <el-form-item prop="cid" label="商品分类">
                <el-select @change="changeselect" v-model="category" placeholder="请选择分类">
                    <el-option v-for="i in ptcategory" :key="i.id" :label="i.name" :value="i.id"></el-option>
                </el-select>
                <el-select v-model="form.cid" placeholder="请选择分类">
                    <el-option v-for="i in categorylist" :key="i.id" :label="i.name" :value="i.id"></el-option>
                </el-select>
            </el-form-item>
            <el-form-item prop="photo" label="商品图片">
                <el-upload
                    :limit="6"
                    :on-exceed="overnum"
                    v-model="form.picture"
                    name="photo"
                    :action="url"
                    ref="upload"
                    :headers="token"
                    list-type="picture-card"
                    :auto-upload="true"
                    :multiple="true"
                    id="xxx"
                    :on-success="filesuccess"
                    :before-upload="beforefile"
                >
                    <i class="el-icon-plus"></i>
                </el-upload>
            </el-form-item>

            <el-form-item>
                <el-button type="primary" @click="onSubmit">点击添加</el-button>
            </el-form-item>
        </el-form>
    </div>
</template>
<script>
import url from '../../assets/js/baseurl.js';
export default {
    data() {
        return {
            form: {
                name: '',
                price: '',
                describes: '',
                photo: { photoUrl: [] },
                cid: '',
                stock: ''
            },
            filebeforeflag: false,
            token: {},
            category: '',
            ptcategory: [],
            categorylist: [],
            url: '',
            myrules: {
                name: [
                    { required: true, message: '请输入商品名', trigger: 'blur' },
                    { min: 5, max: 30, message: '长度在 5 到 30个字符', trigger: 'blur' }
                ],
                price: [{ required: true, message: '请输入商品名', trigger: 'blur' }],
                describes: [
                    { required: true, message: '请描述商品', trigger: 'blur' },
                    { min: 10, max: 50, message: '长度在 10 到 50个字符', trigger: 'blur' }
                ],
                stock: [{ required: true, message: '请输入库存', trigger: 'blur' }],
                cid: [{ required: true, message: '请选择分类', trigger: 'blur' }]
            }
        };
    },
    methods: {
        filesuccess: function (res) {
            this.form.photo.photoUrl.push(res.photoUrl[0]);
        },
        beforefile: function (file) {
            if (file) {
                this.filebeforeflag = true;
            }
        },
        changeselect: async function (val) {
            let res = await this.$http.get(`${url.xiaoli}/list/category`, { params: { parent_id: val } });
            this.categorylist = res.data.data.lists;
        },
        overnum: function () {
            this.$message.error('只能上传六张图片');
        },
        onSubmit: async function () {
            try {
                // await this.$refs.upload.submit();
                if (!this.filebeforeflag) {
                    this.$message.error('请选择图片');
                    return false;
                }
                await this.$refs.form.validate();
                console.log(this.form.photo);
                this.form.photo = `${JSON.stringify(this.form.photo)}`;
                let res = await this.$http.post(`${url.lxy}/admin/goods`, this.form);
                this.form.photo = [];
                if (res.data.code) {
                    this.$message(res.data.msg);
                }
                this.filebeforeflag = false;
                location.reload();
            } catch (error) {}
        },
        open: function (msg) {
            this.$message(msg);
        }
    },
    mounted: async function () {
        let res = await this.$http.get(`${url.xiaoli}/list/category`);
        this.ptcategory = res.data.data.lists;
        this.token = { token: sessionStorage.getItem('access_token') };
        this.url = url.lxy + '/files';
    }
};
</script>

<style lang="scss" scoped>
</style>